<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>汽车管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${yeqifu}/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${yeqifu}/static/css/public.css" media="all"/>
</head>
<body class="childrenBody">

<!-- 搜索条件开始 -->
<form class="layui-form" method="post" id="searchFrm">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">车牌号:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="carnumber" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入车牌号" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">车辆类型:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="cartype" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入车辆类型" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">车辆颜色:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="color" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入车辆颜色" style="height: 30px;border-radius: 10px">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">车辆描述:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="description" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入车辆描述" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">是否出租:</label>
            <div class="layui-input-inline">
                <input type="radio" name="isrenting" value="1" title="已出租">
                <input type="radio" name="isrenting" value="0" title="未出租">
            </div>
            <button type="button"
                    class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm"
                    id="doSearch" style="margin-top: 4px">查询
            </button>
            <button type="reset"
                    class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm"
                    style="margin-top: 4px">重置
            </button>
        </div>
    </div>
</form>

<div class="car_box">
    <div class="car_box__top">
        <button type="button" id="add__car" class="layui-btn layui-btn-sm layui-btn-radius" style="margin-left: 50px" lay-event="add">增加</button>
    </div>
    <div class="car_box__body" id="car_box__body"></div>
</div>

<!-- 添加和修改的弹出层-->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form layui-row layui-col-space10" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-col-md12 layui-col-xs12">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md9 layui-col-xs7">

                    <div class="layui-form-item magt3">
                        <label class="layui-form-label">车牌号:</label>
                        <div class="layui-input-block" style="padding: 5px">
                            <input type="text" name="carnumber" id="carnumber" autocomplete="off" class="layui-input"
                                   lay-verify="required"
                                   placeholder="请输入车牌号" style="height: 30px;border-radius: 10px">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">车辆类型:</label>
                        <div class="layui-input-block" style="padding: 5px">
                            <input type="text" name="cartype" autocomplete="off" class="layui-input"
                                   placeholder="请输入车辆类型" style="height: 30px;border-radius: 10px">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">车辆颜色:</label>
                        <div class="layui-input-block" style="padding: 5px">
                            <input type="text" name="color" autocomplete="off" class="layui-input"
                                   placeholder="请输入车辆颜色" style="height: 30px;border-radius: 10px">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3 layui-col-xs5">
                    <div class="layui-upload-list thumbBox mag0 magt3" id="carimgDiv">
                        <%--显示要上传的图片--%>
                        <img class="layui-upload-img thumbImg" id="showCarImg">
                        <%--保存当前显示图片的地址--%>
                        <input type="hidden" name="carimg" id="carimg">
                    </div>
                </div>
            </div>
            <div class="layui-form-item magb0">
                <label class="layui-form-label">车辆描述:</label>
                <div class="layui-input-block" style="padding: 5px">
                    <input type="text" name="description" autocomplete="off" class="layui-input"
                           placeholder="请输入车辆描述" style="height: 30px;border-radius: 10px">
                </div>
            </div>
            <div class="layui-form-item magb0">
                <div class="layui-inline">
                    <label class="layui-form-label">车辆价格:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="price" class="layui-input" lay-verify="required|number"
                               placeholder="请输入车辆价格" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">出租价格:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="rentprice" class="layui-input" lay-verify="required|number"
                               placeholder="请输入车辆出租价格" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
            </div>
            <div class="layui-form-item magb0">
                <div class="layui-inline">
                    <label class="layui-form-label">出租押金:</label>
                    <div class="layui-input-block" style="padding: 5px">
                        <input type="text" name="deposit" class="layui-input" lay-verify="required|number"
                               placeholder="请输入车辆出租押金" style="height: 30px;border-radius: 10px">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">是否出租:</label>
                    <div class="layui-input-inline">
                        <input type="radio" name="isrenting" value="1" title="已出租">
                        <input type="radio" name="isrenting" value="0" checked="checked" title="未出租">
                    </div>
                </div>
            </div>
            <div class="layui-form-item magb0">
                <div class="layui-input-block" style="text-align: center;padding-right: 120px">
                    <button type="button"
                            class="layui-btn layui-btn-normal layui-btn-md layui-icon layui-icon-release layui-btn-radius"
                            lay-filter="doSubmit" lay-submit="">提交
                    </button>
                    <button type="reset"
                            class="layui-btn layui-btn-warm layui-btn-md layui-icon layui-icon-refresh layui-btn-radius">
                        重置
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<%--查看大图弹出的层开始--%>
<div id="viewCarImageDiv" style="display: none;text-align: center">
    <img alt="车辆图片" width="700px" height="450px" id="view_carimg">
</div>

<script src="${yeqifu}/static/layui/layui.js"></script>
<script type="text/javascript">

</script>

<script>
    var list;
    layui.use(['jquery', 'layer', 'form', 'table', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var dtree = layui.dtree;
        var upload = layui.upload;
        var url;
        var mainIndex;
        const getData = async (params) => {
            $.get("${yeqifu}/car/loadAllCar?page=1&limit=10" + (params ? '&' + params : '') , function (data) {
                const { data: listData } = data;
                list = listData;
                console.log(listData);
                let str = '';
                for (let i = 0; i < list.length; i ++ ) {
                    str +=  "<div class='car_box__body__item'>" +
                        "<img class='box_img' carimg='"+list[i].carimg+"' carnumber='"+list[i].carnumber+"' width=134 height=80 src=${yeqifu}" + list[i].carimg + "/>" +
                        "<div class='car_box__body__item__content'>" +
                        "<div>"+ "<span>" + list[i].color + "</span>" + "<span>" + list[i].cartype + "</span>" + "<span>" + list[i].carnumber + "</span>" + "<span>" + list[i].description + "</span>"  +"</div>" +
                        "<div>" + "<span>车辆价格：" + list[i].price + "</span>" + "<span style='margin-left: 10px'>出租价格：" + list[i].rentprice + "</span>" + "<span class='car_box__body__item__tag'>" + (list[i].isrenting == '1' ? '已出租' : '未出租')+ "</span>" + "</div>" +
                        "<div>" + "<span>出租押金：" + list[i].deposit + "</span>" + "<span style='margin-left: 10px; color: #999'>" + list[i].createtime.split(" ")[0] + "</span>" + "</div>" +
                        "</div>" +
                        "<div style='margin-left: auto'>" +
                        "<a class='layui-btn layui-btn-xs layui-btn-radius edit_btn'>编辑</a>" +
                        "<a class='layui-btn layui-btn-danger layui-btn-xs layui-btn-radius del_btn'>删除</a>" +
                        "</div>" +
                        "</div>"
                }
                const body = document.getElementById('car_box__body');
                body.innerHTML = str;
                const boxImgs = document.getElementsByClassName('box_img');
                for (let i = 0; i < boxImgs.length; i ++ ) {
                    boxImgs[i].addEventListener('click', () => {
                        showCarImage(list[i])
                    })
                }
                const edit = document.getElementsByClassName('edit_btn');
                for (let i = 0; i < edit.length; i ++ ) {
                    edit[i].addEventListener('click', () => {
                        openUpdateCar(list[i])
                    })
                }
                const del = document.getElementsByClassName('del_btn');
                for (let i = 0; i < del.length; i ++ ) {
                    del[i].addEventListener('click', () => {
                        deleteCar(list[i])
                    })
                }
            });
        }
        //打开添加页面
        function openAddCar() {
            mainIndex = layer.open({
                type: 1,
                title: '添加车辆',
                content: $("#saveOrUpdateDiv"),
                area: ['700px', '480px'],
                success: function (index) {
                    //清空表单数据
                    $("#dataFrm")[0].reset();
                    //设置默认图片
                    $("#showCarImg").attr("src", "${yeqifu}/static/defaultImage/defaultcarimage.jpg");
                    $("#carimg").val("images/defaultcarimage.jpg");
                    url = "${yeqifu}/car/addCar";
                    $("#carnumber").removeAttr("readonly","readonly");
                }
            });
        }
        //打开修改页面
        function openUpdateCar(data) {
            mainIndex = layer.open({
                type: 1,
                title: '修改车辆',
                content: $("#saveOrUpdateDiv"),
                area: ['700px', '480px'],
                success: function (index) {
                    form.val("dataFrm", data);
                    $("#showCarImg").attr("src", "${yeqifu}" + data.carimg);
                    url = "${yeqifu}/car/updateCar";
                    $("#carnumber").attr("readonly","readonly");
                }
            });
        }

        form.on("submit(doSubmit)", function (obj) {
            //序列化表单数据
            var params = $("#dataFrm").serialize();
            console.log(url);
            $.post(url, params, function (obj) {
                layer.msg(obj.msg);
                //关闭弹出层
                layer.close(mainIndex)
                //刷新数据 表格
                getData();
            })
            return false;
        });

        const addCar = document.getElementById('add__car');
        addCar.addEventListener('click', () => {
            openAddCar()
        })



        //上传缩略图
        upload.render({
            elem: '#carimgDiv',
            url: '${yeqifu}/file/uploadFile',
            method: "post",  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
            acceptMime: 'images/*',
            field: "file",
            done: function (res, index, upload) {
                $('#showCarImg').attr('src', "${yeqifu}" + res.data.src);
                $('#carimg').val(res.data.src);
                $('#carimgDiv').css("background", "#fff");
            }
        });

        //查看大图
        function showCarImage(data) {
            mainIndex = layer.open({
                type: 1,
                title: "【"+data.carnumber+'】的车辆图片',
                content: $("#viewCarImageDiv"),
                area: ['750px', '500px'],
                success: function (index) {
                    $("#view_carimg").attr("src","${yeqifu}"+data.carimg);
                }
            });
        }

        const deleteCar = (data) => {
            layer.confirm('真的删除【' + data.carnumber + '】这个车辆么？', function (index) {
                //向服务端发送删除指令
                $.post("${yeqifu}/car/deleteCar", {carnumber: data.carnumber}, function (res) {
                    layer.msg(res.msg);
                    //刷新数据表格
                    getData();
                })
            });
        }

        $("#doSearch").click(function () {
            const params = $("#searchFrm").serialize();
            getData(params)
        });
        getData()
    });
</script>
</body>
</html>

